<template>
  <div class="contact-page">
    <!-- 波浪背景装饰 -->
    <div class="wave-bg"></div>
    
    <!-- 主内容区 -->
    <main class="contact-main">
      <!-- 标题区 -->
      <section class="contact-header">
        <h1 class="title-gradient">联系我们</h1>
        <p class="subtitle">有任何问题或建议？我们随时为您服务</p>
      </section>

      <!-- 双栏内容 -->
      <div class="contact-columns">
        <!-- 联系方式卡片 -->
        <div class="contact-card info-card">
          <div class="card-header">
            <h2><span class="icon-wrapper"><el-icon><Message /></el-icon></span>联系方式</h2>
            <div class="header-line"></div>
          </div>
          
          <div class="contact-info">
            <div class="info-item">
              <div class="info-icon">
                <el-icon color="#409EFF"><Phone /></el-icon>
              </div>
              <div class="info-content">
                <h3>电话</h3>
                <p>123-456-7890</p>
              </div>
            </div>
            
            <div class="info-item">
              <div class="info-icon">
                <el-icon color="#409EFF"><Message /></el-icon>
              </div>
              <div class="info-content">
                <h3>邮箱</h3>
                <p>contact@tuanxingwang.com</p>
              </div>
            </div>
            
            <div class="info-item">
              <div class="info-icon">
                <el-icon color="#409EFF"><Map /></el-icon>
              </div>
              <div class="info-content">
                <h3>地址</h3>
                <p>北京市海淀区科技园</p>
              </div>
            </div>
          </div>
          
          <div class="social-media">
            <h3>关注我们</h3>
            <div class="social-icons">
              <el-tooltip content="微信公众号" placement="top">
                <el-button type="primary" circle plain>
                  <el-icon><Wechat /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="官方微博" placement="top">
                <el-button type="danger" circle plain>
                  <el-icon><Weibo /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="QQ客服" placement="top">
                <el-button type="info" circle plain>
                  <el-icon><Qq /></el-icon>
                </el-button>
              </el-tooltip>
            </div>
          </div>
        </div>

        <!-- 表单卡片 -->
        <div class="contact-card form-card">
          <div class="card-header">
            <h2><span class="icon-wrapper"><el-icon><Edit /></el-icon></span>留言反馈</h2>
            <div class="header-line"></div>
          </div>
          
          <el-form 
            @submit.prevent="submitForm" 
            :model="formData" 
            :rules="rules" 
            ref="contactForm"
            class="contact-form"
          >
            <el-form-item prop="name">
              <el-input 
                v-model="formData.name" 
                placeholder="请输入姓名" 
                prefix-icon="User"
                size="large"
              ></el-input>
            </el-form-item>
            
            <el-form-item prop="email">
              <el-input 
                v-model="formData.email" 
                type="email" 
                placeholder="请输入邮箱" 
                prefix-icon="Message"
                size="large"
              ></el-input>
            </el-form-item>
            
            <el-form-item prop="subject">
              <el-input 
                v-model="formData.subject" 
                placeholder="请输入主题" 
                prefix-icon="Files"
                size="large"
              ></el-input>
            </el-form-item>
            
            <el-form-item prop="message">
              <el-input 
                v-model="formData.message" 
                type="textarea" 
                placeholder="请输入留言内容" 
                :rows="5" 
                resize="none"
                show-word-limit
                maxlength="500"
              ></el-input>
            </el-form-item>
            
            <el-form-item>
              <el-button 
                type="primary" 
                size="large" 
                :loading="loading" 
                @click="submitForm"
                class="submit-btn"
              >
                <template #loading>
                  <el-icon class="is-loading"><Loading /></el-icon>
                  提交中
                </template>
                <template #default>
                  <el-icon><Promotion /></el-icon>
                  提交留言
                </template>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { 
  Phone, Message, Map, Wechat, Weibo, Qq, 
  Edit, Promotion, Loading 
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const formData = ref({
  name: '',
  email: '',
  subject: '',
  message: ''
});

const loading = ref(false);
const contactForm = ref(null);

const rules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在2-20个字符之间', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: '请输入主题', trigger: 'blur' },
    { min: 2, max: 50, message: '主题长度在2-50个字符之间', trigger: 'blur' }
  ],
  message: [
    { required: true, message: '请输入留言内容', trigger: 'blur' },
    { min: 5, max: 500, message: '留言内容长度在5-500个字符之间', trigger: 'blur' }
  ]
};

const submitForm = () => {
  contactForm.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      
      // 模拟API请求
      setTimeout(() => {
        loading.value = false;
        ElMessage.success({
          message: '留言提交成功！我们会尽快与您联系',
          duration: 3000,
          showClose: true
        });
        formData.value = {
          name: '',
          email: '',
          subject: '',
          message: ''
        };
      }, 1500);
    }
  });
};
</script>

<style scoped lang="scss">
.contact-page {
  position: relative;
  min-height: 100vh;
  background-color: #f8fafc;
  padding: 2rem;
  overflow: hidden;
  
  .wave-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    z-index: 0;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -50px;
      left: 0;
      width: 100%;
      height: 100px;
      background-size: cover;
    }
  }
}

.contact-main {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  z-index: 1;
}

.contact-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-top: 1rem;
  
  .title-gradient {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, #409EFF, #79bbff);
    -webkit-background-clip: text;
    background-clip: text;
    color: white;
    margin-bottom: 0.5rem;
    animation: fadeInDown 0.8s ease;
  }
  
  .subtitle {
    font-size: 1.1rem;
    color: #dddbdb;
    animation: fadeIn 1s ease 0.3s both;
  }
}

.contact-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  animation: fadeInUp 0.8s ease;
}

.contact-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(64, 158, 255, 0.1);
  }
  
  .card-header {
    margin-bottom: 2rem;
    
    h2 {
      font-size: 1.5rem;
      color: #333;
      display: flex;
      align-items: center;
      margin-bottom: 0.75rem;
      
      .icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(64, 158, 255, 0.1);
        border-radius: 50%;
        margin-right: 0.75rem;
        
        .el-icon {
          color: #409EFF;
          font-size: 1.2rem;
        }
      }
    }
    
    .header-line {
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #409EFF, rgba(64, 158, 255, 0.3));
      border-radius: 3px;
      transition: width 0.5s ease;
    }
    
    &:hover .header-line {
      width: 100px;
    }
  }
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  
  .info-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(64, 158, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    
    .el-icon {
      font-size: 1.2rem;
    }
  }
  
  .info-content {
    display: flex;
    align-items: center;
    justify-content: center;
    h3 {
      margin-right: 5px;
      font-size: 1.3rem;
      color: #666;
      margin-bottom: 0.25rem;
    }
    
    p {
      font-size: 1.1rem;
      color: #333;
      font-weight: 500;
      margin: 0;
    }
  }
}

.social-media {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #eee;
  
  h3 {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    
    .el-button {
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.1) rotate(5deg);
      }
    }
  }
}

.contact-form {
  .el-form-item {
    margin-bottom: 1.5rem;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .el-input, .el-textarea {
    :deep(.el-input__inner), :deep(.el-textarea__inner) {
      padding-left: 5px;
      transition: all 0.3s ease;
      
      &:focus {
        border-color: #409EFF;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
      }
    }
  }
  
  .submit-btn {
    width: 100%;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(64, 158, 255, 0.3);
    }
    
    .el-icon {
      margin-right: 8px;
    }
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .contact-page {
    padding: 1rem;
  }
  
  .contact-header {
    .title-gradient {
      font-size: 2rem;
    }
    
    .subtitle {
      font-size: 1rem;
    }
  }
  
  .contact-columns {
    grid-template-columns: 1fr;
  }
  
  .contact-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .contact-header {
    margin-bottom: 2rem;
  }
  
  .info-item {
    flex-direction: column;
    
    .info-icon {
      margin-bottom: 0.5rem;
    }
  }
}
</style>